<template>
  <view>
    <view class="bg-white">
      <up-tabs :list="list1" :scrollable="false" @click="tabClick"></up-tabs>
    </view>
    <view class="padding" v-if="currentTab === 0">
      <view class="margin-bottom-sm">
        <u-text text="未讲解" size="32rpx" color="#333" bold></u-text>
      </view>
      <up-swipe-action>
        <up-swipe-action-item class="margin-bottom radius-lg" v-model:show="show" :options="options1"
          v-for="item in untToldQuestionList" :key="item.id" @click="handleTold(item)">
          <view class="flex align-center justify-between gap padding" @click="handleMistakeDetailClick(item)">
            <view class="flex-1">
              <view>
                <u-text :text="item.title" size="32rpx" color="#333"></u-text>
              </view>
              <view class="flex">
                <u-text :text="`错误人数：${item.count}`" size="28rpx" color="#999"></u-text>
                <u-text align="right" :text="`错误率：${item.mistakeRate}%`" size="28rpx" color="#999"></u-text>
              </view>
            </view>
            <view>
              <u-icon name="arrow-right" color="#999" size="16"></u-icon>
            </view>
          </view>
        </up-swipe-action-item>
      </up-swipe-action>

      <view class="margin-bottom-sm">
        <u-text text="已讲解" size="32rpx" color="#333" bold></u-text>
      </view>
      <view class="margin-bottom radius-lg bg-white" v-for="item in untToldQuestionList" :key="item.id"
        @click="handleMistakeDetailClick(item)">
        <view class="flex align-center justify-between gap padding">
          <view class="flex-1">
            <view>
              <u-text :text="item.title" size="32rpx" color="#333"></u-text>
            </view>
            <view class="flex">
              <u-text :text="`错误人数：${item.count}`" size="28rpx" color="#999"></u-text>
              <u-text align="right" :text="`错误率：${item.mistakeRate}%`" size="28rpx" color="#999"></u-text>
            </view>
          </view>
          <view>
            <u-icon name="arrow-right" color="#999" size="16"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="padding" v-if="currentTab === 1">
      <view class="flex align-center justify-between bg-white radius-lg padding margin-top" v-for="item in 3"
        :key="item" @click="handleWriteOffClick(item)">
        <view class="flex-1">
          <u-text text="张同学" size="32rpx" color="#333" bold></u-text>
        </view>
        <view class="flex-1">
          <u-text :text="item == 1 ? '已核销' : '待核销'" size="24rpx" :color="item == 1 ? '#0060E6' : '#FF5252'"
            bold></u-text>
        </view>
        <view>
          <u-icon name="arrow-right" color="#999" size="16"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, reactive } from 'vue';

const currentTab = ref(0)
// 创建响应式数据  
const list1 = reactive([
  { name: '共性错题' },
  { name: '题目核销' },
]);

const untToldQuestionList = ref([
  {
    id: 1,
    title: '10以内加减法',
    count: 8,
    mistakeRate: 30
  },
  {
    id: 2,
    title: '20以内加减法',
    count: 8,
    mistakeRate: 30
  },
]);

const options1 = reactive([{
  text: '已讲解',
  style: {
    background: '#0060E6'
  }
}]);

const handleMistakeDetailClick = (item) => {
  console.log('item', item)
  uni.navigateTo({
    url: `/pages/teacher/classroom/commonMistakeDetail?id=${item.id}`
  })
}

const handleWriteOffClick = (item) => {
  console.log('item', item)
  uni.navigateTo({
    url: `/pages/common/writeOffExercise/index?id=${item.id}`
  })
}

const tabClick = (index) => {
  console.log('index', index)
  currentTab.value = index.index
}
</script>